<script lang="ts" setup>
    import {ref, reactive, PropType, watch} from 'vue'
    import {IconLeft} from '@arco-design/web-vue/es/icon';
    import { useRouter, useRoute} from 'vue-router';

    import { Message } from '@arco-design/web-vue';
    import iconDeleteImg from '@/assets/images/icon_delete_img.svg';
    import { IconEdit } from '@arco-design/web-vue/es/icon';
    const route = useRoute();

    const props = defineProps({
        headerData:{
            type: Object as PropType<any>
        }
    })
    const headerText = ref<any>()
    const router = useRouter();

    const sleep = () => {
        return new Promise((resolve) => {
            setTimeout(resolve)
        })
    }
    watch( 
        () => props.headerData,
        (val) => {
            headerText.value = val
        },
        {
            immediate: true
        }
    )
</script>

<template>
    <div class="table-header dis-flex align-items space-between">
        <div class="table-header_l">
            <span class="col_333 cp" @click="() => {
                router.go(-1);
            }">
                <icon-left />
                返回
            </span>
            <span>详情</span>
            
        </div>
        <div class="table-header-r">
            
            <icon-edit />
            <img :src="iconDeleteImg" alt="">
            
        </div>
    </div>
</template>   
<style lang="scss">
.table-header_l {
    .arco-typography {
        margin-bottom: 0;
        margin-left: 24px;
    }
    .arco-typography-edit-content {
        margin: 0;
        margin-left: 24px;
        left: 0;
    }
}
.popContent {
    padding-top: 10px;
    .text-style {
        margin: 12px 0 6px;
    }
    .modal-title {
        font-size: 14px;
        color: #33353B;
    }
    .bottom-btn {
        display: flex;
        justify-content: end;
    }
}
.arrowClass {
    width: 10px;
    height: 10px;
}

</style>
<style lang="scss" scoped>
    @import './index.scss'
</style>